/**
 * Created by zhouli on 2019/1/22
 * 渲染数据权限下面的条件细项--成本中心
 * 注意：成本中心字段，先选择成本中心，再选择成本中心项，成本中心项必须要有两个值
 * 与后端约定
 * 如果是成本中心字段，条件细项必须有两个值，代表从与至
 */
import React from 'react';
import {deepCopy, messages} from "share/common";
import {connect} from 'react-redux';
import {Select, message, Input} from 'antd';
import ListSelector from 'components/list-selector.js';
import PDService from 'containers/permission-setting/role-permission-setting/role-permission-detail/components/permission-data/permission-data.service';
//需要在这个里面去配置弹窗类型
import chooserData from 'share/chooserData';
import 'styles/permission-setting/role-permission-setting/role-permission-detail/components/permission-data/rule-item/item-cost-center.scss';
import {
  includeOrExpectArr,
} from 'containers/permission-setting/role-permission-setting/role-permission-detail/components/permission-data/data-rule-model';
import SelectAllCostCenter from 'components/template/select-all-cost-center-item/select-all-cost-center';
const Option = Select.Option;
//需要根据不同模块，不同字段，显示不一样的数据模型，这里只是成本中心的数据模型
class ItemCostCenter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showCostCenterItemFromSelector: false,
      showCostCenterItemToSelector: false,
      selectorItemFrom: chooserData['cost_center_item_by_id'],//弹窗显示配置
      selectorItemTo: chooserData['cost_center_item_by_id'],//弹窗显示配置
    };
  }

  showCostCenterItemFromSelector = () => {
    if (this.props.conditionItem.subFieldValue) {
      this.setState({
        showCostCenterItemFromSelector: true,
      });
    } else {
      message.warning(messages('permission-setting.key27')/*请选择一个成本中心*/)
    }
  };
  //控制是否弹出条件添加弹窗
  handleCostCenterItemFromCancel = () => {
    this.setState({showCostCenterItemFromSelector: false})
  };
  //处理条件添加弹框点击ok,添加值
  handleCostCenterItemFromOk = (result) => {
    let costCenterItem = result.result[0];
    const {condition, conditionItem} = this.props;
    conditionItem.conditionValues[0].conditionValue = costCenterItem.code;
    condition.conditionDetails[this.props.itemIndex] = conditionItem;
    PDService.getPermissionData(condition, this.props.permissionData, true);
    //关闭弹窗
    this.handleCostCenterItemFromCancel();
  };

  showCostCenterItemToSelector = () => {
    if (this.props.conditionItem.subFieldValue) {
      this.setState({showCostCenterItemToSelector: true});
    } else {
      message.warning(messages('permission-setting.key27')/*请选择一个成本中心*/)
    }
  };
  //控制是否弹出条件添加弹窗
  handleCostCenterItemToCancel = () => {
    this.setState({showCostCenterItemToSelector: false})
  };
  //处理条件添加弹框点击ok,添加值
  handleCostCenterItemToOk = (result) => {
    let costCenterItem = result.result[0];
    const {condition, conditionItem} = this.props;
    conditionItem.conditionValues[1].conditionValue = costCenterItem.code;
    condition.conditionDetails[this.props.itemIndex] = conditionItem;
    PDService.getPermissionData(condition, this.props.permissionData, true);
    //关闭弹窗
    this.handleCostCenterItemToCancel();
  };

  costCenterItemFromChange=(e)=>{
    let val = e.target.value;
    const {condition, conditionItem} = this.props;
    conditionItem.conditionValues[0].conditionValue = val;
    condition.conditionDetails[this.props.itemIndex] = conditionItem;
    PDService.getPermissionData(condition, this.props.permissionData, true);
  }
  costCenterItemToChange=(e)=>{
    let val = e.target.value;
    const {condition, conditionItem} = this.props;
    conditionItem.conditionValues[1].conditionValue = val;
    condition.conditionDetails[this.props.itemIndex] = conditionItem;
    PDService.getPermissionData(condition, this.props.permissionData, true);
  }
  handleCostCenterCancel = (result) => {
  };
  //处理条件添加弹框点击ok,添加值
  handleCostCenterOk = (result) => {
    if (result.length > 0) {
      let costCenter = result[0];
      const {condition, conditionItem} = this.props;
      conditionItem.subFieldValue = costCenter.id;
      conditionItem.subFieldName = costCenter.name;
      condition.conditionDetails[this.props.itemIndex] = conditionItem;
      PDService.getPermissionData(condition, this.props.permissionData, true);
    } else {
      message.warning(messages('permission-setting.key27')/*请选择一个成本中心*/)
    }
  };
  handleCostCenterClear = (result) => {
  }
  //是否包含选择
  handleErOptionChange = (val) => {
    const {condition, conditionItem} = this.props;
    conditionItem.conditionLogic = val;
    condition.conditionDetails[this.props.itemIndex] = conditionItem;
    PDService.getPermissionData(condition, this.props.permissionData, true);
  }

  //渲染成本中心
  renderCostCenter = (conditionItem) => {
    let sClass = 'c-item-sub-title-disabled f-left';
    let iClass = 'c-item-detail-item-disabled f-left';
    if (this.props.isEditing) {
      sClass = 'c-item-sub-title f-left';
      iClass = 'c-item-detail-item f-left';
    }
    return (
      <div className='c-item-wrap'>
        <div className='c-item-logic f-left'>
          <Select
            style={{width: '200'}}
            disabled={!this.props.isEditing}
            value={conditionItem.conditionLogic}
            placeholder={messages("common.please.select")}
            onChange={this.handleErOptionChange}
          >
            {includeOrExpectArr.map(item => {
              return <Option value={item.code}>{item.name}</Option>
            })}
          </Select>
        </div>
        <div className={sClass}>
          <SelectAllCostCenter
            needCloseIcon={false}
            isSingle={true}
            disabled={!this.props.isEditing}
            originSelectedData={[{
              "id": this.props.conditionItem.subFieldValue,
              "name": this.props.conditionItem.subFieldName,
            }]}
            onConfirm={this.handleCostCenterOk}
            onClear={this.handleCostCenterClear}
            onCancel={this.handleCostCenterCancel}
          />
        </div>


        <div className='c-item-detail f-left'>
          {conditionItem.conditionValues &&
          conditionItem.conditionValues.map &&
          conditionItem.conditionValues.map((conditionValues, index) => {
            if (index === 0) {
              return (
                <div className={iClass}>
                  <div className='value-wrap'>
                    {conditionValues.conditionValue ? conditionValues.conditionValue : messages('permission-setting.key52')/*编码从*/}
                  </div>
                  <div className='input-wrap'>
                    <Input onChange={this.costCenterItemFromChange}
                           value={conditionValues.conditionValue}/>
                  </div>
                  <div className='item-btn-wrap'
                       onClick={this.props.isEditing &&
                       this.showCostCenterItemFromSelector}
                       key={index}>
                    ...
                  </div>
                </div>
              );
            } else {
              return (
                <div className={iClass}>
                  <div className='value-wrap'>
                    {conditionValues.conditionValue ? conditionValues.conditionValue : messages('permission-setting.key53')/*编码至*/}
                  </div>
                  <div className='input-wrap'>
                    <Input onChange={this.costCenterItemToChange}
                           value={conditionValues.conditionValue}
                    />
                  </div>
                  <div className='item-btn-wrap' onClick={this.props.isEditing &&
                       this.showCostCenterItemToSelector}
                       key={index}>
                    ...
                  </div>
                </div>
              );
            }
          })}
        </div>
        <div from>
          {/*成本中心项，需要把成本中心的id带上*/}
          <ListSelector
            single={true}
            visible={this.state.showCostCenterItemFromSelector}
            onOk={this.handleCostCenterItemFromOk}
            onCancel={this.handleCostCenterItemFromCancel}
            extraParams={{
              costCenterId: this.props.conditionItem.subFieldValue
            }}
            selectorItem={this.state.selectorItemFrom}
          />
        </div>

        <div to>
          {/*成本中心项，需要把成本中心的id带上*/}
          <ListSelector
            single={true}
            visible={this.state.showCostCenterItemToSelector}
            onOk={this.handleCostCenterItemToOk}
            onCancel={this.handleCostCenterItemToCancel}
            extraParams={{
              costCenterId: this.props.conditionItem.subFieldValue
            }}
            selectorItem={this.state.selectorItemTo}
          />
        </div>
        <div className='clear'></div>
      </div>
    )
  }

  render() {
    return (
      <div className="data-rule-cost-center">
        {this.renderCostCenter(this.props.conditionItem)}
      </div>
    )
  }
}

ItemCostCenter.propTypes = {
  itemIndex: React.PropTypes.any.isRequired,// 条件细项序号
  condition: React.PropTypes.object.isRequired,// 单个条件对象
  isEditing: React.PropTypes.any,// 是否在编辑
  conditionItem: React.PropTypes.object.isRequired,// 单个条件对象细项
};

ItemCostCenter.defaultProps = {};


function mapStateToProps(state) {
  return {
    company: state.login.company,
    tenantMode: state.main.tenantMode,
    permissionData: state.permissionData.permissionData
  }
}

export default connect(mapStateToProps)(ItemCostCenter);

